<template>
    <div class="">
        <vxe-table class="myVxeTable" :data="tableData" ref="tableRef" height="100%" :scroll-y="{enabled: true, gt: 20}">
            <vxe-column field="dictDeptCfgCategory" title="部门" min-width="200">
                <template #default="{ row }">
                    <el-select v-model="row.dictDeptCfgCategory" clearable multiple placeholder="请选择" :disabled="props.isRead">
                        <el-option v-for="item in deptCfgCategoryList" :key="item.code" :label="item.name"
                            :value="item.code"></el-option>
                    </el-select>
                </template>
            </vxe-column>
            <vxe-column field="className" title="指定方法" min-width="180">
                <template #default="{ row }">
                    <el-input v-model="row.className" placeholder="请输入" style="width: 100%;" clearable :disabled="props.isRead"></el-input>
                </template>
            </vxe-column>
            <vxe-column title="操作" align="center" width="80" v-if="!props.isRead">
                <template #header>
                    <div class="optPart">
                        <span>操作</span>
                        <el-icon class="myIcon" @click="clickAdd">
                            <CirclePlus />
                        </el-icon>
                    </div>
                </template>
                <template #default="{ rowIndex }">
                    <el-icon class="myIcon" title="删除" @click="clickDelete(rowIndex)">
                        <Delete />
                    </el-icon>
                </template>
            </vxe-column>
        </vxe-table>
    </div>
</template>

<script setup lang="ts">
import { Delete, CirclePlus } from '@element-plus/icons-vue'
import type { Dict } from '@/api/pub/type.ts';
import { dictsToArr } from '@/utils/public';

let $emit = defineEmits(['reQuery']);
const props = withDefaults(defineProps<{
    pageSrc?: string,
    initMsg: any[],
    isRead: boolean
}>(), {
    pageSrc: '',
    initMsg: () => [],
    isRead: false
});
watch(() => props.initMsg, (val) => { 
    getTable(val);
});
const dictList = autoDict();
const deptCfgCategoryList = ref<Dict[]>([]);
const tableData = ref<any[]>([]);

onMounted(() => {
    init()
})
const init = () => {
    getTable(props.initMsg);
    deptCfgCategoryList.value = dictList.DEPT_CFG_CATEGORY?.list.filter((item: any) => item.code !== '0');
};
const getTable = (list: any[]) => {
    // console.log('method：',list);
    tableData.value = JSON.parse(JSON.stringify(list))
    tableData.value.forEach(item => {
        item.dictDeptCfgCategory = dictsToArr(item.dictDeptCfgCategory);
    });
};
const clickAdd = () => {
    let paramInit = {
        "id": null,
        "dictDeptCfgCategory": [],
        "className": null,
    }
    tableData.value.push(paramInit);
}
const clickDelete = (index: number) => {
    tableData.value.splice(index, 1);
}
const save = () => {
    let subList = [];
    subList = tableData.value.map(item => {
        return {
            ...item,
            dictDeptCfgCategory: item.dictDeptCfgCategory ? item.dictDeptCfgCategory.toString() : ''
        };
    });
    return subList;
}
// 暴露save方法给父组件调用
defineExpose({
    save
});
</script>

<style scoped lang="scss"></style>
